[V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color scheme for vibrant puzzle game aesthetic */ --background: oklch(0.98 0.01 250); --foreground: oklch(0.15 0.02 250); --card: oklch(1 0 0); --card-foreground: oklch(0.15 0.02 250); --popover: oklch(1 0 0); --popover-foreground: oklch(0.15 0.02 250); --primary: oklch(0.65 0.25 280); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.98 0.02 40); --secondary-foreground: oklch(0.15 0.02 250); --muted: oklch(0.93 0.01 0); --muted-foreground: oklch(0.56 0.02 250); --accent: oklch(0.7 0.28 25); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.92 0.02 250); --input: oklch(0.92 0.02 250); --ring: oklch(0.65 0.25 280); --chart-1: oklch(0.75 0.26 25); --chart-2: oklch(0.68 0.28 135); --chart-3: oklch(0.62 0.25 260); --chart-4: oklch(0.72 0.27 50); --chart-5: oklch(0.65 0.26 320); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.12 0.01 250); --foreground: oklch(0.95 0.01 0); --card: oklch(0.18 0.02 250); --card-foreground: oklch(0.95 0.01 0); --popover: oklch(0.18 0.02 250); --popover-foreground: oklch(0.95 0.01 0); --primary: oklch(0.7 0.25 280); --primary-foreground: oklch(0.12 0.01 250); --secondary: oklch(0.25 0.02 0); --secondary-foreground: oklch(0.95 0.01 0); --muted: oklch(0.27 0.01 250); --muted-foreground: oklch(0.71 0.02 250); --accent: oklch(0.75 0.28 25); --accent-foreground: oklch(0.12 0.01 250); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.27 0.02 250); --input: oklch(0.27 0.02 250); --ring: oklch(0.7 0.25 280); --chart-1: oklch(0.75 0.26 25); --chart-2: oklch(0.68 0.28 135); --chart-3: oklch(0.62 0.25 260); --chart-4: oklch(0.72 0.27 50); --chart-5: oklch(0.65 0.26 320); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Added custom animations for block game interactions */ @keyframes scale-pop { 0% { transform: scale(0.95); opacity: 0; } 50% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } } @keyframes slide-up-fade { 0% { transform: translateY(8px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes fade-out-scale { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } } .animate-scale-pop { animation: scale-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .animate-slide-up { animation: slide-up-fade 0.5s ease-out; } .animate-fade-out { animation: fade-out-scale 0.6s ease-out forwards; } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import GameBoard from "@/components/game-board" import ScoreDisplay from "@/components/score-display" import GameOver from "@/components/game-over" export default function Home() { const [score, setScore] = useState(0) const [moves, setMoves] = useState(0) const [isGameOver, setIsGameOver] = useState(false) const [highScore, setHighScore] = useState(0) useEffect(() => { const saved = localStorage.getItem("blockBlastHighScore") if (saved) setHighScore(Number.parseInt(saved)) }, []) const handleScoreUpdate = (newScore: number) => { setScore(newScore) if (newScore > highScore) { setHighScore(newScore) localStorage.setItem("blockBlastHighScore", newScore.toString()) } } const handleGameOver = () => { setIsGameOver(true) } const handleNewGame = () => { setScore(0) setMoves(0) setIsGameOver(false) } return (

Block Blast

Clear lines and score big!

Status

{isGameOver ? "Game Over" : "Playing"}

{isGameOver ? ( ) : ( )}

💡 Select blocks and place them on the grid to clear lines!

) } [V0_FILE]typescriptreact:file="components/grid-cell.tsx" isMerged="true" "use client" interface GridCellProps { x: number y: number value: string | null onClick: () => void } export default function GridCell({ x, y, value, onClick }: GridCellProps) { return ( ) } [V0_FILE]typescriptreact:file="components/block-selector.tsx" isMerged="true" "use client" interface BlockPattern { pattern: number[][] color: string id: number } interface BlockSelectorProps { blocks: BlockPattern[] selectedBlock: number | null onSelectBlock: (index: number) => void } export default function BlockSelector({ blocks, selectedBlock, onSelectBlock }: BlockSelectorProps) { const renderBlockPreview = (pattern: number[][], color: string) => { const maxX = Math.max(...pattern.map(([x]) => x)) const maxY = Math.max(...pattern.map(([, y]) => y)) const size = Math.max(maxX, maxY) + 1 return (

{Array(size * size) .fill(0) .map((_, i) => { const x = i % size const y = Math.floor(i / size) const isActive = pattern.some(([px, py]) => px === x && py === y) return (

) })}

) } return (

Next Blocks

{blocks.map((block, index) => ( ))}

) } [V0_FILE]typescriptreact:file="components/score-display.tsx" isMerged="true" interface ScoreDisplayProps { label: string value: number } export default function ScoreDisplay({ label, value }: ScoreDisplayProps) { return (

{label}

{value}

) } [V0_FILE]typescriptreact:file="components/game-over.tsx" isMerged="true" "use client" interface GameOverProps { score: number highScore: number onNewGame: () => void } export default function GameOver({ score, highScore, onNewGame }: GameOverProps) { const isNewHighScore = score > highScore return (

🎮

Game Over!

{isNewHighScore &&

🎉 New High Score!

}

Final Score

{score}

High Score

{highScore}

) } [V0_FILE]typescriptreact:file="components/block-preview.tsx" isMerged="true" export default function BlockPreview() { return null } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.3", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Block Blast Puzzle Game", description: "Play Block Blast - A fun and addictive puzzle game!", generator: "v0.app", viewport: { width: "device-width", initialScale: 1, maximumScale: 1, }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/game-board.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect, useCallback } from "react" import GridCell from "./grid-cell" import BlockSelector from "./block-selector" interface Piece { x: number y: number color: string } interface GameBoardProps { onScoreUpdate: (score: number) => void onGameOver: () => void onMovesUpdate: (moves: number) => void } export default function GameBoard({ onScoreUpdate, onGameOver, onMovesUpdate }: GameBoardProps) { const GRID_SIZE = 6 const COLORS = ["#FF6B6B", "#4ECDC4", "#45B7D1", "#FFA07A", "#98D8C8", "#F7DC6F"] const [grid, setGrid] = useState<(string | null)[][]>([]) const [selectedBlock, setSelectedBlock] = useState(null) const [score, setScore] = useState(0) const [moves, setMoves] = useState(0) const [canMove, setCanMove] = useState(true) const [isGridInitialized, setIsGridInitialized] = useState(false) // Initialize grid useEffect(() => { const newGrid = Array(GRID_SIZE) .fill(null) .map(() => Array(GRID_SIZE).fill(null)) setGrid(newGrid) setIsGridInitialized(true) }, []) // Generate random blocks const getRandomBlocks = useCallback(() => { const blockPatterns = [ [[0, 0]], // Single [ [0, 0], [1, 0], ], // Horizontal 2 [ [0, 0], [0, 1], ], // Vertical 2 [ [0, 0], [1, 0], [0, 1], ], // L-shape [ [0, 0], [1, 0], [2, 0], ], // Horizontal 3 [ [0, 0], [0, 1], [0, 2], ], // Vertical 3 ] return Array(3) .fill(0) .map(() => { const pattern = blockPatterns[Math.floor(Math.random() * blockPatterns.length)] const color = COLORS[Math.floor(Math.random() * COLORS.length)] return { pattern, color, id: Math.random() } }) }, []) const [blocks, setBlocks] = useState(getRandomBlocks()) const canPlaceBlock = (pattern: number[][], startX: number, startY: number) => { if (grid.length === 0) return false return pattern.every(([dx, dy]) => { const x = startX + dx const y = startY + dy return x >= 0 && x < GRID_SIZE && y >= 0 && y < GRID_SIZE && !grid[y][x] }) } const placeBlock = (pattern: number[][], startX: number, startY: number, color: string) => { const newGrid = grid.map((row) => [...row]) pattern.forEach(([dx, dy]) => { const x = startX + dx const y = startY + dy newGrid[y][x] = color }) return newGrid } const clearLines = (gameGrid: (string | null)[][]): { newGrid: (string | null)[][]; linesCleared: number } => { const newGrid = gameGrid.map((row) => [...row]) let linesCleared = 0 // Clear full rows for (let y = 0; y < GRID_SIZE; y++) { if (newGrid[y].every((cell) => cell !== null)) { newGrid[y] = Array(GRID_SIZE).fill(null) linesCleared++ } } // Clear full columns for (let x = 0; x < GRID_SIZE; x++) { if (newGrid.every((row) => row[x] !== null)) { for (let y = 0; y < GRID_SIZE; y++) { newGrid[y][x] = null } linesCleared++ } } // Clear 3x3 squares for (let y = 0; y < GRID_SIZE - 2; y++) { for (let x = 0; x < GRID_SIZE - 2; x++) { let isFilled = true for (let dy = 0; dy < 3; dy++) { for (let dx = 0; dx < 3; dx++) { if (newGrid[y + dy][x + dx] === null) { isFilled = false break } } } if (isFilled) { for (let dy = 0; dy < 3; dy++) { for (let dx = 0; dx < 3; dx++) { newGrid[y + dy][x + dx] = null } } linesCleared += 3 } } } return { newGrid, linesCleared } } const handleCellClick = (x: number, y: number) => { if (!canMove || selectedBlock === null) return const block = blocks[selectedBlock] if (!canPlaceBlock(block.pattern, x, y)) return setCanMove(false) // Place block const newGrid = placeBlock(block.pattern, x, y, block.color) // Clear lines const { newGrid: clearedGrid, linesCleared } = clearLines(newGrid) // Update score const pointsEarned = linesCleared * 100 const newScore = score + pointsEarned setScore(newScore) onScoreUpdate(newScore) setGrid(clearedGrid) // Remove placed block const newBlocks = blocks.filter((_, i) => i !== selectedBlock) setSelectedBlock(null) // Add new block if needed if (newBlocks.length === 0) { setBlocks(getRandomBlocks()) } else { setBlocks(newBlocks) } const newMoves = moves + 1 setMoves(newMoves) onMovesUpdate(newMoves) setTimeout(() => setCanMove(true), 300) } const checkGameOver = () => { if (!isGridInitialized || grid.length === 0 || blocks.length === 0) return false return blocks.every((block) => { for (let y = 0; y < GRID_SIZE; y++) { for (let x = 0; x < GRID_SIZE; x++) { if (canPlaceBlock(block.pattern, x, y)) { return false } } } return true }) } useEffect(() => { if (isGridInitialized && checkGameOver()) { onGameOver() } }, [blocks, isGridInitialized]) return (

{grid.map((row, y) => row.map((cell, x) => ( handleCellClick(x, y)} /> )), )}

) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This